<template>
    <div id="ai-pic-item-type-two" @mouseenter="showInfo = true" @mouseleave="showInfo = false"
        :style="'background-image:url(' + imageUrl + ');width:' + width + ';height:' + height + 'px;'">
        <div class="info" v-if="showInfo">
            <div class="top">
                <div class="author">
                    <img src="http://gips3.baidu.com/it/u=3557221034,1819987898&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
                        alt="">
                    <div class="name">壹壹</div>
                </div>
                <div class="like">
                    <el-icon>
                        <Star />
                    </el-icon>4
                </div>
            </div>
            <div class="bottom" @click="createInfoDialogVisible = true">
                <el-icon>
                    <View />
                </el-icon>生成信息

            </div>

        </div>
        <!-- 生成信息对话框开始 -->
        <el-dialog class="el-dialog-createinfo" v-model="createInfoDialogVisible" width="800">
            <div class="scroll">
                <div class="top">
                    <div class="art-pic">
                        <img :src="imageUrl" alt="" srcset="">
                        <div class="btn">
                            <el-button :icon="Download" plain>下载原图</el-button>
                            <el-button :icon="Star" plain>34</el-button>
                        </div>
                        <div class="tags">
                            <el-tag>美女</el-tag>
                            <el-tag>帅哥</el-tag>
                            <el-tag>古建筑</el-tag>
                        </div>
                    </div>
                    <div class="info">
                        <div class="avatar">
                            <img src="http://gips3.baidu.com/it/u=3419425165,837936650&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024"
                                alt="" srcset="">
                            <div class="name">壹壹</div>
                        </div>
                        <div class="desc">数据离快递sdfsf 沙发斯蒂芬费奖励是否拉快递费姜辣素开发就垃圾的弗兰克萨芬</div>
                        <div class="publish-time">2020-2-23 23:34:23</div>
                        <div class="active-prompt">
                            <div class="title">
                                <div class="left">正向提示词</div>
                                <div class="right" style="cursor: ;pointer">
                                    <el-icon>
                                        <CopyDocument />
                                    </el-icon>复制
                                </div>
                            </div>
                            <div class="prompt">
                                skdjf,sjfksjf,sajfljf,ajfajfl,alfjlajf,ajflkasjfl,afjksdalf,alfjlaksdfj,akfa
                            </div>
                        </div>

                        <div class="negtive-prompt">
                            <div class="title">
                                <div class="left">负向提示词</div>
                                <div class="right" style="cursor: ;pointer">
                                    <el-icon>
                                        <CopyDocument />
                                    </el-icon>复制
                                </div>
                            </div>
                            <div class="prompt">
                                skdjf,sjfksjf,sajfljf,ajfajfl,alfjlajf,ajflkasjfl,afjksdalf,alfjlaksdfj,akfa
                            </div>
                        </div>

                        <div class="btn">
                            <el-button plain :icon="CopyDocument">复制全部</el-button>
                            <el-button plain type="primary" :icon="MagicStick">一键生图</el-button>
                        </div>

                        <!-- 引用模型开始 -->
                        <div class="reference-model">
                            <h3>引用模型</h3>
                            <ReferenceModel class="reference-model-item"
                                :model-image="'https://gips3.baidu.com/it/u=1039279337,1441343044&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1024_1024'"
                                :model-name="'风景照'" :model-type="'LORA'"></ReferenceModel>
                            <ReferenceModel class="reference-model-item"
                                :model-image="'https://gips3.baidu.com/it/u=1039279337,1441343044&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1024_1024'"
                                :model-name="'风景照'" :model-type="'LORA'"></ReferenceModel>
                        </div>
                        <!-- 引用模型结束 -->

                        <!-- 图片信息开始 -->
                        <div class="pic-info">
                            <div class="left table">
                                <div class="size table-item">
                                    <div class="title">图片尺寸</div>
                                    <div class="text">1024*1024px</div>
                                </div>
                                <div class="steps table-item">
                                    <div class="title">迭代步数</div>
                                    <div class="text">49</div>
                                </div>
                                <div class="model table-item">
                                    <div class="title">模型</div>
                                    <div class="text">LoraV1.03</div>
                                </div>
                            </div>
                            <div class="right table">
                                <div class="sampler table-item">
                                    <div class="title">采样方法</div>
                                    <div class="text">DPM+2M</div>
                                </div>
                                <div class="cfg table-item">
                                    <div class="title">提示词引导系数</div>
                                    <div class="text">4</div>
                                </div>
                                <div class="seed table-item">
                                    <div class="title">随机种子</div>
                                    <div class="text">3434332332</div>
                                </div>
                            </div>
                        </div>
                        <!-- 图片信息结束 -->
                    </div>
                </div>
                <!-- 分界线开始 -->
                <el-divider />
                <!-- 分界线结束 -->

                <h3>评论</h3>


                <!-- 评论开始 -->
                <div class="comment-board">

                    <div class="comment-area">
                        <el-input v-model="commentConent" placeholder="善言善语结善缘，恶言恶语伤人心..." class="input-with-select">

                            <template #append>
                                <span>发送</span>
                            </template>
                        </el-input>
                    </div>

                    <div class="comments">
                        <CommentItem></CommentItem>
                    </div>
                    <div class="no-more">
                        暂时没有更多评论了
                    </div>
                </div>
                <!-- 评论结束 -->
            </div>
        </el-dialog>
        <!-- 生成信息对话框结束 -->
    </div>
</template>

<script setup>
import { ref } from "vue"
import { Star, View } from "@element-plus/icons-vue"
import { defineProps, computed } from "vue"
import { CopyDocument, MagicStick, Download } from "@element-plus/icons-vue"
import ReferenceModel from "./ReferenceModel.vue"
import CommentItem from "../functioncomp/CommentItem.vue"

const props = defineProps(['imageUrl', 'width', 'height'])
const imageUrl = computed(() => { return props.imageUrl })
const width = computed(() => { return props.width })
const height = computed(() => { return props.height })

// 显示详细信息
const showInfo = ref(false)
//生成信息
var createInfoDialogVisible = ref(false)
// 评论内容
var commentConent = ref("")
</script>

<style  scoped>
#ai-pic-item-type-two {
    cursor: pointer;
    border-radius: 10px;
    background-size: cover;
    background-position: 50% 50%;
    transition: box-shadow 0.3s ease;
    overflow: hidden;
}

#ai-pic-item-type-two:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

#ai-pic-item-type-two>.info {
    height: 100%;
    transition: background-color 0.5s ease;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: space-between;
}

#ai-pic-item-type-two .info .top {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    color: white;
}

#ai-pic-item-type-two .info .top .author {
    display: flex;
    display: -webkit-flex;
    font-size: 14px;
}

#ai-pic-item-type-two .info .top .author img {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    margin-right: 10px;
}

#ai-pic-item-type-two .info .bottom {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
    color: white;
}

#ai-pic-item-type-two .el-dialog-createinfo .scroll {
    border-radius: 5px;
    height: 75vh;
    overflow-y: scroll;

}

#ai-pic-item-type-two .el-dialog-createinfo .top {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;

}


#ai-pic-item-type-two .el-dialog-createinfo .top .art-pic img {
    width: 300px;
    border-radius: 5px;
}



#ai-pic-item-type-two .el-dialog-createinfo .top .art-pic .btn {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: 20px;
}

#ai-pic-item-type-two .el-dialog-createinfo .top .art-pic .btn .el-button {
    width: 45%;
}


#ai-pic-item-type-two .el-dialog-createinfo .top .art-pic .tags {
    margin-top: 20px;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}


#ai-pic-item-type-two .el-dialog-createinfo .top .art-pic .tags .el-tag {
    margin-right: 10px;
}

#ai-pic-item-type-two .el-dialog-createinfo .top .info {
    width: 450px;
}

#ai-pic-item-type-two .el-dialog-createinfo .top .info .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 40px;
}

#ai-pic-item-type-two .el-dialog-createinfo .top .info .avatar {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 18px;
    line-height: 40px;
    margin-left: 10px;
}

#ai-pic-item-type-two .el-dialog-createinfo .top .info .avatar .name {
    font-size: 14px;
    color: gray;
    margin-left: 10px;
}

#ai-pic-item-type-two .el-dialog-createinfo .top .info .publish-time {
    color: gray;
    font-size: 10px;
    margin-top: 20px;
}

#ai-pic-item-type-two .el-dialog-createinfo .top .info .desc {
    font-size: 16px;
    margin-top: 20px;
}

#ai-pic-item-type-two .el-dialog-createinfo .top .info .active-prompt,
.negtive-prompt {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px;
    margin-top: 20px;
}


#ai-pic-item-type-two .el-dialog-createinfo .top .info .active-prompt .title {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}

#ai-pic-item-type-two .el-dialog-createinfo .top .info .active-prompt .prompt {
    background-color: #fff;
    padding: 10px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 5px;
    margin-top: 10px;
}

#ai-pic-item-type-two .el-dialog-createinfo .top .info .negtive-prompt .title {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}

#ai-pic-item-type-two .el-dialog-createinfo .top .info .negtive-prompt .prompt {
    background-color: #fff;
    padding: 10px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 5px;
    margin-top: 10px;
}

#ai-pic-item-type-two .el-dialog-createinfo .top .info .btn {
    width: 100%;
    margin-top: 20px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
}


#ai-pic-item-type-two .el-dialog-createinfo .top .info .btn .el-button {
    width: 45%;
    height: 40px;
}



#ai-pic-item-type-two .el-dialog-createinfo .top .info .pic-info {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
    font-size: 12px;
    line-height: 20px;
}

#ai-pic-item-type-two .el-dialog-createinfo .top .info .reference-model {
    margin-top: 20px;
}

#ai-pic-item-type-two .el-dialog-createinfo .top .info .reference-model .reference-model-item {
    margin-top: 10px;
}



#ai-pic-item-type-two .el-dialog-createinfo .top .info .pic-info .table {
    width: 50%;
}


#ai-pic-item-type-two .el-dialog-createinfo .top .info .pic-info .table .table-item {
    margin-top: 20px;
}


#ai-pic-item-type-two .el-dialog-createinfo .comment-board .comment-area  {
    padding: 15px;
    margin-top: 20px;
    border-radius: 6px;
    background-color: rgba(128, 128, 128, 0.2);
}

#ai-pic-item-type-two .el-dialog-createinfo .comment-board .no-more  {
    display: flex;
    display: -webkit-flex;
    justify-content:center;
    align-items: center;
    font-size: 13px;
    color: gray;
    margin: 30px 0;
}


</style>